<header class="page-header clearfix">
    <h4><a ng-href="#/docker/image"><i class="fa fa-arrow-left"></i></a>镜像库 {{::dtl.name}}</h4>
    <ol class="breadcrumb">
        <li><a ng-href="#/docker/image">我的镜像</a></li>
        <li class="active">镜像库</li>
    </ol>
</header>
<section>
    <div class="panel image-detail">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-8">
                    <div class="detail-title clearfix">
                        <div class="detail-image" ng-class="{'image-app': dtl.imagePath.indexOf('default') == 0 }">
                            <img ng-src="./images/docker-icon/{{::dtl.imagePath}}"/>
                        </div>
                        <div>
                            <div class="image-name">{{::dtl.name}}</div>
                            <span>{{::dtl.typeName}}</span>
                        </div>
                    </div>
                    <div class="detail-download">
                        <dt>下载地址</dt>
                        <dd>
                            <span id="copyText">docker&nbsp;pull&nbsp;{{::dtl.download}}:{{::dtl.ver}}</span>
                            <a title="复制至剪切板" ng-click="dtl.copyToClipBoard()"><i class="fa fa-clipboard"></i></a>
                        </dd>
                    </div>
                </div>
                <div class="col-sm-4">
                    <dt>创建时间</dt>
                    <dd>{{::dtl.createTime | date:'yyyy-MM-d HH:mm:ss'}}</dd>
                    <dt>更新时间</dt>
                    <dd>{{::dtl.updateTime | date:'yyyy-MM-d HH:mm:ss'}}</dd>
                </div>
            </div>
            <dt>概述</dt>
            <dd>{{::dtl.memo || '-'}}</dd>
        </div>
    </div>
    <div class="panel panel-list">
        <div class="panel-heading">版本信息</div>
        <div class="panel-body">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th width="35%">版本</th>
                    <th width="15%">状态</th>
                    <th width="30%">发布时间</th>
                    <th class="text-center" width="20%">Docker File</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="elem in dtl.verTable">
                    <td>{{::elem.version}}</td>
                    <td ng-switch="::elem.state">
                        <span ng-switch-when="000" class="text-success"><i class="fa fa-check margin-right-5"></i>可用</span>
                        <span ng-switch-when="001" class="text-success"><i class="fa fa-check margin-right-5"></i>可用</span>
                        <span ng-switch-default class="text-danger"><i class="fa fa-times margin-right-5"></i>不可用</span>
                    </td>
                    <td>{{::elem.createTime | date:'yyyy-MM-d HH:mm:ss'}}</td>
                    <td class="text-center"><a href="javascript:void(0)" title="查看DockerFile"
                                               ng-click="dtl.openFileForm(elem)"><i class="fa fa-file-text"></i></a></td>
                </tr>
                </tbody>
            </table>
            <!--Loading-->
            <div class="loading" ng-show="!dtl.verTable"></div>
            <!--分页-->
            <div ng-show="dtl.verTable" class="pagination-group">
                <ui-pagination-info items-per-page="10" items-per-page-select="false"
                                    total-items="dtl.verPage.totalItems"
                                    current-page="dtl.verPage.currentPage"></ui-pagination-info>
                <button type="button" ng-click="dtl.getList()" class="btn btn-default btn-refresh"><i
                        class="fa fa-refresh"></i></button>
                <ui-pagination items-per-page="10" total-items="dtl.verPage.totalItems"
                               ng-model="dtl.verPage.currentPage" ng-change="dtl.getList()"></ui-pagination>
            </div>
        </div>
    </div>
</section>